<div class="text-center">
  <a href="https://xieziyu.github.io/ngx-echarts">
    <img src="assets/img/logo.svg" alt="Logo" width="80" />
  </a>
  <h1 align="center">NGX-ECHARTS</h1>
  <p>
    <img src="https://img.shields.io/npm/v/ngx-echarts.svg" alt="version" class="mr-2" />
    <img src="https://img.shields.io/npm/dm/ngx-echarts.svg" alt="downloads" />
  </p>
  <p class="lead text-muted">
    ngx-echarts is an <strong class="text-danger">Angular</strong>(ver >= 2.x) directive for
    <strong class="text-danger">ECharts</strong> (ver >= 3.x)
  </p>
  <p>
    <a
      href="https://github.com/xieziyu/ngx-echarts"
      target="blank"
      nz-button
      nzType="primary"
      class="mr-2"
      ><i nz-icon nzType="github" nzTheme="outline"></i> GitHub</a
    >
    <a
      href="https://xieziyu.github.io/ngx-echarts/api-doc"
      target="blank"
      nz-button
      nzType="default"
      ><i nz-icon nzType="read" nzTheme="outline"></i> Documents</a
    >
  </p>
</div>

<div class="container">
  <div nz-row nzGutter="16">
    <div nz-col nzSpan="24">
      <markdown ngPreserveWhitespaces [data]="scriptText"></markdown>
    </div>
    <div nz-col nzSpan="24">
      <markdown ngPreserveWhitespaces [data]="importText"></markdown>
    </div>
    <div nz-col nzSpan="24">
      <markdown ngPreserveWhitespaces [data]="importNgModuleText"></markdown>
    </div>
  </div>
</div>
